<template>
  <view class="page">
    <view class="res error x-center">
      <uni-icons size="80" color="#ffffff" type="closeempty"></uni-icons>
    </view>
    <view v-if="!$empty(state.msg)" class="msg">{{state.msg}}</view>
  </view>
</template>

<script setup>
const state = reactive({
  msg: '',
})
onLoad((option) => {
  state.msg = option.msg;
})
</script>

<style scoped lang="less">
.page {
  background-color: #fff;
  height: 100vh;

  .success {
    background-color: @success;
  }

  .error {
    background-color: @danger;
  }

  .res {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;

    position: absolute;
    left: 50%;
    top: 100rpx;
    margin-left: -100rpx;
  }

  .msg {
    position: absolute;
    top: 360rpx;
    width: 100%;
    text-align: center;
  }
}
</style>
